Navigationtree

The navigation structure is defined using a tree. Each possible route in the navigation is represented by a node in the tree. To adjust the navigation structure, select the "Navigation Tree" tab in the Explorer within the navigation editor.

Tree

When the "Navigation Tree" tab is selected in the Explorer, the tree is displayed in the Explorer. When creating a new page, a node is automatically added to the navigation tree.

You can create additional nodes using the Delete Button (1) and the Add Button (2).

You can use drag & drop to arrange the order of navigation entries or to place items into submenus.

When a navigation type is selected, a preview is displayed in the content area.

Detail Panel

When a navigation entry is selected, a Detail Panel opens on the right side. Here, you can set the following properties:

- Label
Display name in the navigation.

- SourcePageId
Specifies which page to load.

- Navigationtype
Determines which mask to use to display the navigation. More information is available under Masks.

- Is default page
Specifies which page to show after logging into the app. Only one default page can be set.

- Menu entry hidden
Hides the navigation entry in the navigation.

- Full Path
When specifying the route, the entire path must be provided. Usually, the automatically generated URL mirrors the hierarchical structure of the navigation, with each level in the structure forming part of the route entry chain. For simpler URLs, custom URLs can be defined using the Full Path option.

- Route
The path that appears in the browser URL when the node is clicked. Depending on whether the entire path needs to be specified, we may only need to provide the last part of the URL path. Otherwise, the rest will be automatically generated from the tree structure.

info

If you want to define aliases for specific pages, you can add additional nodes here with URLs that point to the same page.

- Group
Some masks offer a grouping function for navigation entries. If certain entries are to be grouped, the Group property can be used to determine which entries belong to a group. The navigation component iterates through the entries in their order and changes the style depending on the Group value.